<template>
  <div class="tag-list">
    <div
      class="tag-list-item"
      :class="[item.tagId === curId ? 'active' : '']"
      v-for="item in tagList"
      :key="item.tagId"
      @click="emits('update:curId', item.tagId)"
    >
      {{ item.tagName }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const tagList = ref([
  {
    systemId: 10008,
    tagId: '10001',
    tagName: '研发部',
    type: 0,
    description: '',
    createdTime: 1684984194904
  },
  {
    systemId: 10008,
    tagId: '10002',
    tagName: '销售部',
    type: 0,
    description: '',
    createdTime: 1684999031290
  },
  {
    systemId: 10008,
    tagId: '10003',
    tagName: '生产部',
    type: 0,
    description: '',
    createdTime: 1685090006707
  }
])
withDefaults(
  defineProps<{
    curId: string
  }>(),
  {
    curId: ''
  }
)
const emits = defineEmits<{
  (e: 'update:curId', tagId: string): void
}>()
</script>

<style lang="scss" scoped>
.tag-list {
  .tag-list-item {
    width: 200px;
    height: 32px;
    margin-top: 10px;
    border-radius: 10px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    &:hover {
      background-color: #ecf5ff;
    }
    &.active {
      background-color: #d9ecff;
    }
  }
}
</style>
